<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=false" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="language" content="en" />

	<title>radare2 webui</title>

	<script type="text/javascript" src="m/vendors/jquery.min.js"></script>
	<script type="text/javascript" src="m/r2.js"></script>

	<style>
	.circular, .circular {
		background: white;
		width: 100%;
	}
	#title, #button {
		margin-top: 20px;
		color: white;
	}
	.layout_value{
		padding-left: 5px;
		cursor:pointer;
	}
	.highlight {
		background: #80f080 ;
		color:black;
		font-weight:bold;
	}
	li {
		margin-left:-20px;
	}
	input, ul, select {
		border:3px solid black;
		background-color: #606060;
		color: #f0f0f0;
	}
	hr {
		visibility:hidden;
		size: 0 solid black;
		width:100%;
		color:#707070;
	}
	img {
		cursor:pointer;
	}
	</style>
</head>
<body style="background: rgb(30,30,30); margin:0px;color: white; font-family: monospace;">
	<div id="content" align="center">
		<div class="circular" id="logo"><img style="" width="100px" src="r2.svg" onerror="this.onerror=null; this.src='./enyo/icon.png'"></div>
		<!-- <div id="title"><h1>radare2</h1></div> -->
		<br />
		<div style="cursor:pointer" id="fortune"></div></a>
<hr size=1 />
<h2>Current Project</h2>
		<table>
			<tr>
				<td>CurrentProject: </td>
				<td><div class="layout_value" id="openproject"></div></td>
			</tr>
			<tr>
				<td>CurrentFile: </td>
				<td><div class="layout_value" id="openfile"></div></td>
			</tr>
			<tr>
				<td>OtherProjects: </td>
				<td><div id="recent"></div></td>
			</tr>
			<tr>
				<td>Layout: </td>
				<td>
					<div id="layout">
						<select id="dropdown">
						  <option value="p">panels (desktop)</option>
						  <option value="m">material (responsive)</option>
						  <option value="enyo">enyo (mobile)</option>
						  <option value="t">tiles (legacy)</option>
						</select>
					</div>
				</td>
			</tr>
		</table>
		<div id="button">
			<input id="delete" type="submit" value="Delete" />
			<input id="saveas" type="submit" value="Save As" />
			<input id="save" type="submit" value="Save" />
			<input id="submit" type="submit" value="Open" />
		</div>
<br />
<hr size=1 />
<h2>Files</h2>
		<div id="button">
			<input id="newfile_path" type="input" value=""/>
			<input id="newfile" type="submit" value="Open File ..." />
		</div>
		<div id="button">
<form action="/up/test.bin" enctype="multipart/form-data" method="post">
<input type="file" name="file" />
<input type="submit" value="Upload" />
</form>
		</div>
<br /><br />
	</div>
	<script>
		var filename = "";
		var layout = "";
		var project = "";
		var fortune = "";

		$("#fortune").on ('click', function() {
			r2.cmd("fortune", function(x) {
				$("#fortune").html("<q><i>" + x + "</i></q>");
			});
		});
		$(document).ready( function() {
			function encodeHtmlEntity(str) {
			  return str.replace(/[\u00A0-\u9999\<\>\(\)\{\}\[\]\%\#\&\'\"\\\/]/gim, function(c){
			    return '&#' + c.charCodeAt(0) + ';' ;
			  });
			}
			function updateProjectList() {
				window.location.assign("/");
			}
				r2.cmdj("Plj", function(x) {
					var html = "<ul>";
					for (var i in x) {
						var filename = x[i].trim();
						html += "<li class='layout_value' id='" + filename + "'>" + filename + "</li>";
					}
					html += "</ul>";
					$("#recent").html(html);
				});

			r2.cmd("e http.ui", function(x) {
			  layout = x.trim();
			  $("select#dropdown").val(layout);
			});

			r2.cmdj("oj", function(x) {
				if(x) {
				  if(encodeHtmlEntity(x[0].uri).indexOf("malloc://") !== -1) {
					$("#openfile").html('<input type="file" id="filename" name="filename">');
				  } else {

				  	$("#openfile").html(encodeHtmlEntity(x[0].uri));
				  	filename = encodeHtmlEntity(x[0].uri);
				  }
				}
			});
			r2.cmd ("Po", function(x) {
				$("#openproject").html (x);
			});

			r2.cmd("fortune", function(x) {
				$("#fortune").html("<q><i>" + x + "</i></q>");
			});

			$('#filename').on('change', function(){
				filename = $('#filename').val();
			});

			$('.layout_value').on('click', function(){
				$('.highlight').removeClass('highlight');
				project = this.id;
				$("#" + project).addClass('highlight');
				switch (project) {
				case "openfile":
				case "openproject":
					project = "";
					break;
				}
			});

			$('#dropdown').on('change', function(){
				layout = $(this).val();
				r2.cmd(":e http.ui=" + layout, function(x) {});
			});

			$('#logo').on('click', function() {
				window.location.assign("./" + layout);
			})
			$('#saveas').on('click', function() {
				var prjname = prompt ("Project Name", project);
				if (prjname) {
					r2.cmd ("Ps "+prjname, function() {
						updateProjectList ();
					})
				}
			});
			$('#save').on('click', function(){
				var prjname = prompt ("Project Name");
				if (prjname) {
					r2.cmd ("Po", function (x) {
						if (!x) {
							x = prompt ("Project Name");
						}
						if (x) {
							r2.cmd ("Ps "+x, function() {
								updateProjectList ();
							});

						}
					});
				}});
			$('#delete').on('click', function() {
				if (project != "") {
					r2.cmd ("Pd "+project, function () {
						updateProjectList ();
						alert ("Project "+project+" deleted");
						project = "";
					});
				} else {
					alert ("First select a project");
				}
			});
			$('#newfile').on('click', function(){
				var path =  $('#newfile_path').val();
				r2.cmd(":e file.project=;o--;o "+path,function() {
					window.location.assign("./" + layout);
				});
			});
			$('#submit').on('click', function(){
				if (project == "openfile" || project == "openproject") { // if curfile selected
					window.location.assign("./" + layout);
				} else if (project !== "" && layout !== "") {
					r2.cmd("Po " + project, function(x) {});
					window.location.assign("./" + layout);
				} else if (filename !== "" && layout !== "") {
					window.location.assign("./" + layout);
				} else {
					alert("Choose file and layout");
				}
			});
		});
	</script>
</body>
</html>
